<template>
	<view class="wrap">
		<view class="big-pic" v-if="teacher_card.avatar">
			<image :src="teacher_card.avatar" mode="aspectFit"></image>
		</view>
		<view class="big-pic" v-else>
			<image :src="defimg"></image>
		</view>
		<view>
			<v-teacher-summary class="write-bg" :item="teacher_card"></v-teacher-summary>
		</view>
		<view class="write-bg" style="margin-top: 5px;">
			<v-anchor :tabs="tabs" @tab="changeTab"></v-anchor>
		</view>
		<view class="tab-content">
			<view class="content-main" v-show="tabs.currentTab === 'Discuss' ">
				<view class="no-item-wrap" v-if="!student_discuss.length"><text>~ 暂无评价 ~</text></view>
				<v-tab-wrap-discuss :discuss="student_discuss" v-else></v-tab-wrap-discuss>
			</view>
			<view class="content-main" v-show="tabs.currentTab === 'Teacher'">
				<v-teacher-info :infos="teacher_resume"></v-teacher-info>
			</view>
			<view class="content-main" v-show="tabs.currentTab === 'Correlated'">
				<view v-if="recommendList.length == 0" class="discuss-wrap">暂无课程</view>
				<view class="lesson-warp" v-else>
					<view class="item" v-for="(item, index) in recommendList" :key="index">
						<v-competitive-summary mclass="lesson-card" :item='item' :disableNav="true"></v-competitive-summary>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import teacherSummary from './components/teacher-summary'
	import anchor from './components/anchor'
	// 3个选项卡组件
	import tabWrapDiscuss from './components/tab-wrap-discuss'
	import tabWrapTeacher from './components/tab-wrap-teacher'
	import tabWrapCorrelated from './components/tab-wrap-correlated'
	import competitiveSummary from './components/competitive-summary'
	import teacherInfo from './components/teacher-info.vue'
	// 引入工具集
	import util from '@/common/util.js'

	export default {
		data() {
			return {
				time: Date.parse(new Date()) / 1000, //当前时间
				teacher_id: 1,
				course_page: 0,
				tabs: {
					items: {
						'Discuss': '学员评价',
						'Teacher': '教师简介',
						'Correlated': '相关课程'
					},
					currentTab: 'Discuss'
				},
				cur_tab: 0,
				sub_obj: {}, // 科目列表
				teacher_card: {},
				teacher_resume: {},
				student_discuss: [],
				recommendList: [] // 教师相关课程列表
			}
		},
		components: {
			vTeacherSummary: teacherSummary,
			vCompetitiveSummary: competitiveSummary,
			vAnchor: anchor,
			vTabWrapDiscuss: tabWrapDiscuss,
			vTabWrapTeacher: tabWrapTeacher,
			vTabWrapCorrelated: tabWrapCorrelated,
			vTeacherInfo: teacherInfo
		},
		methods: {
			loadCourse() {
				// 获取教师相关课程
				this.$zbapi.apiPost(`stu/teacher/course/info/${this.teacher_id}`, {
					limit: 10,
					page: ++this.course_page
				}).then(res => {
					if (res.data.code == 0) {
						res.data.data.list.forEach((item, index) => {
							item.start_month = new Date(item.teach_start_day * 1000).format('MM.dd')
							item.end_month = new Date(item.teach_end_day * 1000).format('MM.dd')
							item.subject_name = this.subject[item.subject_id]
							// 头像，最多取 4 个
							item.figureimgsList = !item.figureimgs ? [] : item.figureimgs.split(',').slice(0, 4)
							let now = parseInt(Date.now() / 1000)
							let enrol = parseInt((item.enrol_end_time - now) / 86400) // 获取截止日期
							if (enrol == 0 && (item.enrol_end_time - now) > 0) {
								item.enrol_end_time = 1
							} else {
								item.enrol_end_time = enrol
							}
						})
						if (this.course_isMore) {
							uni.hideLoading()
							if (res.data.data.list.length <= 0) {
								return uni.showToast({
									title: '无更多数据噢~',
									icon: 'none'
								})
							}
							this.recommendList = this.recommendList.concat(res.data.data.list)
						} else {
							this.recommendList = res.data.data.list
						}
					}
				})
			},
			changeTab(tab) {
				this.$set(this.tabs, 'currentTab', tab.key)
			}
		},
		onLoad(e) {
			// 没有teacher_id
			if (!e.teacher_id) {
				console.error("没有teacher_id")
				return uni.showToast({
					title: '无数据',
					icon: 'none',
					complete() {
						setTimeout(uni.navigateBack, 500);
					}
				});
			}
			this.teacher_id = e.teacher_id
			// 获取一份科目列表
			this.$zbapi.apiPost('common/subject', {}).then(res => {
				if (res.data.code == 0) {
					var sub_obj = {}
					res.data.data.forEach((item, index) => {
						sub_obj[item.subject_id] = item.subject_name
					})
					this.subject = sub_obj
					this.loadCourse()
				} else {
					console.error("没有请求到科目列表数据")
					return uni.showToast({
						title: '网络异常',
						icon: 'none',
						complete() {
							setTimeout(uni.navigateBack, 500);
						}
					});
				}
			})

			// 获取教师详情
			this.$zbapi.apiPost(`stu/teacher/info/${this.teacher_id}`, {}).then(res => {
				if (res.data.code == 0) {
					this.teacher_card = {
						teacher_name: res.data.data.teacher_name,
						tags: res.data.data.impression,
						desc: res.data.data.sketch,
						avatar: res.data.data.figureimg
					}
				}
			})
			// 获取教师简介
			this.$zbapi.apiPost(`stu/teacher/introduce/info/${this.teacher_id}`, {}).then(res => {
				if (res.data.code == 0) {
					this.teacher_resume = {
						telent: res.data.data.approve, // 教师资质
						exper: res.data.data.expreience, // 教师经历
						achive: res.data.data.result, // 教学成果
						charact: res.data.data.trait // 教学特点
					}
				}
			})
			// 获取教师学员评价
			this.$zbapi.apiPost(`stu/teacher/comment/info/${this.teacher_id}`, {}).then(res => {
				if (res.data.code == 0) {
					this.student_discuss = res.data.data.list ? res.data.data.list.map(x => ({
						id: x.student_id, // 学生id
						name: x.student_name, // 学生名
						score: x.score, // 评分
						avatar: x.headimg, // 头像
						time: new Date() - x.create_time * 1000, // 评论时间
						comment: x.comment // 评价内容
					})) : []
				}
			})
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}

	.write-bg {
		background: #fff;
	}

	.big-pic {
		height: 422upx;
		display: flex;
		justify-content: center;
	}

	.big-pic image {
		height: 100%;
		width: 100%;
		background: #FAFAFA;
	}

	.no-item-wrap {
		text-align: center;
		font-size: 30upx;
		color: #C4C4C4;
		line-height: 80upx;
		height: 80upx;
		background: #FFF;
		margin: 30upx;
		border-radius: 10upx;
	}

	.lesson-warp {
		padding: 0 30upx;
		margin-top: 30upx;
	}

	.lesson-warp .item {
		margin-bottom: 20upx;
		width: 100%;
	}

	.item .lesson-card {
		background: #FFF !important;
		border-radius: 20upx;
	}
	
	.discuss-wrap {
		margin-top: 30upx;
		border-radius: 100upx;
		background: #fff;
		overflow: hidden;
		color: #999999;
		line-height: 80upx;
		text-align: center;
		font-size: 30upx;
	}
</style>
